<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>使用样式表</title>
  <link href="../Styles/styles.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <h2>使用样式表</h2>

  <p class="h2subheading">— 用样式格式化 —</p>

  <p>This tutorial describes stylesheets and how to use them in your EPUB.</p>
  <p>本教程介绍了样式表以及如何在 EPUB 中使用样式表。</p>

  <p>A stylesheet (or CSS – Cascading Style Sheet) is a list of instructions that tells ereaders how to display the text in your book. More specifically it tells the ereader how to style text using HTML tags used in your book. For example, this is a style for a paragraph of type (or class) "author":</p>
  <p>样式表（或 CSS——级联样式表）是一系列说明，可以告诉阅读者如何在书中显示文本。更具体地说，它告诉电子书阅读器如何使用书中使用的 HTML 标签设置文本样式。例如，这是类型（或类）“作者”的段落的样式：</p>

  <div class="image">
    <img alt="tutorial-styles-example1" src="../Images/tutorial-styles-example1.png"/>
  </div>

  <p>Understanding and using CSS is the best and most flexible way to layout your book exactly as you want.</p>
  <p>理解和使用 CSS 是最好的和最灵活的方式，可以完全根据您的需要来布置书籍。</p>

  <p>You can find other introductions to CSS online, including:</p>
  <p>您可以在线找到 CSS 的其他介绍，包括：</p>

  <ul>
    <li><a href="http://www.w3schools.com/css/">W3Schools CSS Guide</a></li>
    <li><a href="http://www.w3schools.com/css/">W3Schools CSS 指南</a></li>
  </ul>

  <div class="tip">
    <p class="tiptext">Using CSS can get quite involved, but if you become familiar with the basics it will make it much easier to understand why your book looks the way it does and how to modify its layout.</p>
    <p class="tiptext">使用 CSS 可能会涉及很多，但是如果您熟悉基础知识，它将使您更容易理解为什么书看起来如此以及如何修改其布局。</p>

    <p class="tiptext">This chapter assumes you are familiar with Code View since you need to use Code View to see the details of styles.</p>
    <p class="tiptext">本章假定您熟悉代码视图，因为您需要使用代码视图来查看样式的详细信息。</p>
  </div>

  <h3 class="sigil_not_in_toc" id="style_definition">什么是样式？</h3>

  <p>Styles are used in a book to do things like “make this text blue”, or “make that text centered”, or "leave a little more space above this text". A style definition is just text that looks like:</p>
  <p>书中使用样式来完成诸如“使该文本变蓝”或“使该文本居中”或“在此文本上方留出更多空间”之类的操作。样式定义就是看起来像这样的文本：</p>

  <pre class="example">color: blue;</pre>

  <p>which says make the color of the text blue.</p>
  <p>它说使文本的颜色为蓝色。</p>

  <p>But styles aren’t very useful unless they are applied to something. In the case of an EPUB styles are applied to the HTML elements in your document, tags like <span class="example">p</span> (paragraphs), <span class="example">h1</span> (level 1 headings), <span class="example">div</span> (divisions), <span class="example">span</span> (spans), etc.</p>
  <p>但是，除非将样式应用于某些样式，否则样式并不是很有用。如果将 EPUB 样式应用于文档中的 HTML 元素，请使用 <span class="example">p</span> (paragraphs，段落), <span class="example">h1</span> (1 级标题), <span class="example">div</span> (divisions), <span class="example">span</span> 等。</p>

  <p>There are 3 ways styles can be used in an EPUB:</p>
  <p>在 EPUB 中可以使用 3 种样式：</p>

  <ul>
    <li><span class="listheading">Style Attribute:</span> A style applied directly to one specific HTML tag in the document.</li>
    <li><span class="listheading">样式属性：</span>一种样式，直接应用于文档中的一个特定 HTML 标记。</li>

    <li><span class="listheading">Style Element:</span> A group of styles in one document that can only be used by that document.</li>
    <li><span class="listheading">样式元素：</span>一个文档中的一组样式，只能由该文档使用。</li>

    <li><span class="listheading">Stylesheet:</span> A separate CSS or stylesheet file that can be used by many HTML files and is therefore the most flexible approach.</li>
    <li><span class="listheading">样式表：</span>一个单独的 CSS 或样式表文件，可以被许多 HTML 文件使用，因此是最灵活的方法。</li>
  </ul>

  <p>A separate file is the recommended way to use styles. The descriptions below of each approach will help you understand why.</p>
  <p>建议使用单独的文件来使用样式。下面每种方法的描述将帮助您理解原因。</p>

  <h3 class="sigil_not_in_toc" id="inline_styles">样式属性</h3>

  <p>To apply a style directly to an HTML tag, you can use the <span class="example">style</span> attribute in the tag. For example, to apply the style <span class="example">color: blue</span> to a paragraph you would change</p>
  <p>要将样式直接应用于 HTML 标签，可以在标签中使用 <span class="example">style</span> 属性。例如，要将样式 <span class="example">color: blue</span> 应用于段落，则需要更改</p>

  <pre class="example">&lt;p&gt;Hello&lt;/p&gt;</pre>

  <p>to:</p>

  <pre class="example">&lt;p style="color: blue"&gt;Hello&lt;/p&gt;</pre>

  <p>This works perfectly well if you just want to change a few things and rarely update the formatting. But if you later want to change from using bold to italic for certain words then you will have to edit every place in the book that set the specific style.</p>
  <p>如果您只想更改一些内容并且很少更新格式，则此方法效果很好。但是，如果您以后想要将某些单词的使用粗体更改为斜体，则必须编辑书中设置特定样式的每个位置。</p>

  <p>Styles attributes are rarely used unless they were created by WYSIWYG software or from an automatic conversion and should be avoided.</p>
  <p>除非由 WYSIWYG software 创建或自动转换，否则很少使用样式属性，因此应避免使用。</p>

  <p>There is a much better way to manage styles: using style selectors.</p>
  <p>有一种更好的样式管理方法：使用样式选择器。</p>

  <h3 class="sigil_not_in_toc" id="style_classes">样式选择器</h3>

  <p>A style selector is a way to give a particular style a name, and then use the style in the document just by referring to its name. More specifically the style selector is used to select which elements in your document should use the style you define.</p>
  <p>样式选择器是一种为特定样式命名的方式，然后仅通过引用其名称即可在文档中使用该样式。更具体地说，样式选择器用于选择文档中的哪些元素应使用您定义的样式。</p>

  <p>For example, if you wanted to style all paragraphs in your EPUB to be centered, you could define a rule for a style selector as follows:</p>
  <p>例如，如果您希望将 EPUB 中的所有段落设置为居中样式，则可以为样式选择器定义一个规则，如下所示：</p>

  <pre class="example">p {
    text-align: center;
}</pre>

  <p>This defines a style selector <span class="example">p</span> that will match (or select) all paragraph elements <span class="example">p</span>.</p>
  <p>这定义了样式选择器 <span class="example">p</span>，该样式选择器将匹配（或选择）所有段落元素 <span class="example">p</span>。</p>

  <p>Just using the tag name as a selector is useful for changing every tag, but you can also select specific tags.</p>
  <p>仅将标签名称用作选择器对于更改每个标签很有用，但是您也可以选择特定的标签。</p>

  <p>One of the most common ways to select specific tags is by using a <span class="example">class</span> name in the tag and the selector. A <span class="example">class</span> is just a name that you choose (like "firstparagraph" or "example").</p>
  <p>选择特定标签的最常见方法之一是在标签和选择器中使用 <span class="example">class</span> 名称。<span class="example">class</span> 只是您选择的名称（例如“firstparagraph”或“example”）。</p>

  <p>For example if you wanted to style the first paragraph in a chapter slightly differently than other paragraphs, you could define a style selector as follows (an "em" is one character width):</p>
  <p>例如，如果您要为章节中的第一段设置样式，而与其他段落的样式稍有不同，则可以如下定义样式选择器（“em”是一个字符宽度）：</p>

  <pre class="example">p.first {
    text-indent: 0em;
}</pre>

  <p>This defines a style selector that will match (or select) paragraph tags that use the <span class="example">class</span> name <span class="example">first</span>. You could then use that style in your document for a paragraph by assigning the class name <span class="example">first</span> to the paragraph as follows:</p>
  <p>这定义了一个样式选择器，该选择器将匹配（或选择）使用 <span class="example">class</span> name <span class="example">first</span> 的段落标签。然后，可以通过为该段落分配类名称 <span class="example">first</span> 来为段落使用该样式作为段落：</p>

  <pre class="example">&lt;p class="first"&gt;First paragraph in a chapter&lt;/p&gt;
</pre>

  <p>The great advantage of this abstraction is that you can now update the values of the style (to change the indentation or other settings) without having to update your text.</p>
  <p>这种抽象的最大优点是，您现在可以更新样式的值（以更改缩进或其他设置），而不必更新文本。</p>

  <div class="tip">
    <p class="tiptext">It is common practice to use class names that refer to the purpose of the style and not what the style does in case you change the styling later. For instance, use <span class="example">span.placename</span> instead of <span class="example">span.bold</span> in case you want to change your place names to italic later.</p>
    <p class="tiptext">通常的做法是使用类名称，这些名称是指样式的目的，而不是样式的用途，以防日后更改样式。例如，使用 <span class="example">span.placename</span> 代替 <span class="example">span.bold</span>，以防日后将地名更改为斜体。</p>
  </div>

  <p>Now that you know what a style selector is and how to use them in your text, you need to actually put your style selectors somewhere in order to allow them to work.</p>
  <p>既然您知道样式选择器是什么，以及如何在文本中使用它们，那么您实际上需要将样式选择器放在某个地方，以使它们起作用。</p>

  <p>In an EPUB you can store your stylesheet in the same file as your text (using the <span class="example">style</span> element), or in separate files (external stylesheets or CSS files). You should avoid storing the styles in the HTML files, but it’s explained here in case you see it in your files.</p>
  <p>在 EPUB 中，您可以将样式表存储在与文本相同的文件中（使用 <span class="example">style</span> 元素），也可以存储在单独的文件中（外部样式表或 CSS 文件）。 您应该避免将样式存储在 HTML 文件中，但是如果您在文件中看到样式，请在此处进行说明。</p>

  <h3 class="sigil_not_in_toc" id="internal_stylesheets">样式元素</h3>

  <p>If you store style selectors and rules in the same file as your text they can only be applied to the HTML file they are in and cannot be shared by other HTML files.</p>
  <p>如果将样式选择器和规则与文本存储在同一文件中，则它们只能应用于它们所在的 HTML 文件，而不能与其他 HTML 文件共享。</p>

  <p>When using these internal styles, the style definitions are stored inside a <span class="example">style</span> tag at the top of your HTML files. If you open a file in your book and switch to Code View, you will see that the top of the file contains text between two <span class="example">head</span> tags. This section of your document contains information about the file, and one of the things you can put here is the <span class="example">style</span> tag that defines your internal style rules.</p>
  <p>使用这些内部样式时，样式定义存储在 HTML 文件顶部的 <span class="example">style</span> 标记内。如果您在书中打开一个文件并切换到“代码视图”，则会看到文件顶部包含两个 <span class="example">head</span> 标记之间的文本。文档的此部分包含有关文件的信息，您可以在此处放置的内容之一是定义内部样式规则的 <span class="example">style</span> 标记。</p>

  <p>Here is a typical use of internal styles (they are surround by the <span class="example">style</span> tag):</p>
  <p>这是内部样式的典型用法（它们被 <span class="example">style</span> 标记包围）：</p>

  <pre class="example">&lt;?xml version="1.0" encoding="utf-8" standalone="no"?&gt; 
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; 
&lt;html &gt; 
&lt;head&gt; 
&lt;title&gt;&lt;/title&gt; 

&lt;style&gt;
        h1 { text-align: center; }
        p.boldtext { font-weight: bold; }
&lt;/style&gt; 

&lt;/head&gt;
</pre>

  <p>Internal styles are a way of grouping styles together and using style selectors, but when you have many files in an EPUB it becomes a bit confusing as you have to have separate style rules in each file.</p>
  <p>内部样式是将样式分组在一起并使用样式选择器的一种方式，但是当 EPUB 中有许多文件时，由于每个文件中必须有单独的样式规则，这会造成一些混乱。</p>

  <p>The best way to manage styles is to use a separate stylesheet file to hold your style rules.</p>
  <p>管理样式的最佳方法是使用单独的样式表文件来保存样式规则。</p>

  <div class="tip">
    <p class="tiptext">You can convert or copy your inline styles and your style elements into a separate CSS file. Just remember to link your stylesheet to your HTML file and to delete the old style attributes and elements.</p>
    <p class="tiptext">您可以将内联样式和样式元素转换或复制到单独的 CSS 文件中。只要记住将样式表链接到 HTML 文件并删除旧的样式属性和元素即可。</p>
  </div>

  <h3 class="sigil_not_in_toc" id="external_stylesheets">外部样式表 – CSS 文件</h3>

  <p>If you create a separate file to hold all your style rules, they can apply to the entire book. They are also much easier to find and edit, and updates are much easier to manage as you add and remove files. It also helps to ensure your book is formatted consistently as you can see all your styles in one place.</p>
  <p>如果您创建一个单独的文件来保存所有样式规则，则它们可以应用于整本书。它们也更容易查找和编辑，并且在添加和删除文件时更新也更易于管理。这也有助于确保您的书籍格式一致，因为您可以在一处看到所有样式。</p>

  <p>In Sigil, external stylesheets are stored in the Book Browser in the <span class="example">Styles</span> folder.</p>
  <p>在 Sigil 中，外部样式表存储在“书籍浏览器”中的 <span class="example">Styles</span> 文件夹中。</p>

  <p>To add a new blank stylesheet to your EPUB, use the menu item <span class="menuitem">File→Add→Blank Stylesheet:</span></p>
  <p>要将新的空白样式表添加到 EPUB，请使用菜单项 <span class="menuitem">文件→添加→空白样式表</span>：</p>

  <div class="image">
    <img alt="tutorial-style-blank" src="../Images/tutorial-style-blank.png"/>
  </div>

  <p>As you can see the stylesheet is empty.</p>
  <p>如您所见，样式表为空。</p>

  <p>You can copy or type the styles that you want into the file, and edit it at any time. For example, if you open the <span class="example">styles.css</span> file in an EPUB you might see something like this:</p>
  <p>您可以将所需的样式复制或键入到文件中，然后随时进行编辑。例如，如果您在EPUB中打开 <span class="example">styles.css</span> 文件，您可能会看到以下内容：</p>

  <div class="image">
    <img alt="" src="../Images/tutorial_stylesheets_file.png"/>
  </div>

  <p>Even though you have created the external stylesheet, it’s not actually used by anything yet.</p>
  <p>即使您已经创建了外部样式表，也尚未真正使用它。</p>

  <p>To use it, you need to tell your HTML files to use the stylesheet – by linking to them as described below.</p>
  <p>要使用它，您需要告诉 HTML 文件使用样式表——如下所述链接到它们。</p>

  <h3 class="sigil_not_in_toc">将您的 HTML 文件链接到样式表文件</h3>

  <p>To tell your HTML files which CSS file to use you need to link the stylesheet to your HTML file:</p>
  <p>要告诉您的 HTML 文件使用哪个 CSS 文件，您需要将样式表链接到 HTML 文件：</p>

  <ul>
    <li>Select one or more HTML files in the Book Browser.</li>
    <li>在“图书浏览器”中选择一个或多个 HTML 文件。</li>

    <li>Right-click on the selection.</li>
    <li>右键单击所选内容。</li>

    <li>Choose Link Stylesheets from the context menu:</li>
    <li>从上下文菜单中选择“链接样式表”：</li>
  </ul>

  <div class="image">
    <img alt="tutorial-style-link" src="../Images/tutorial-style-link.png"/>
  </div>

  <ul>
    <li>Click on the stylesheet(s) you want to be used for the files and select <span class="buttonbox">OK</span>.</li>
    <li>单击要用于文件的样式表，然后选择 <span class="buttonbox">确定</span>。</li>
  </ul>

  <div class="tip">
    <p class="tiptext">If you link multiple stylesheets they will be applied in order, so the styles in the last stylesheet will override the styles in the preceding stylesheets.</p>
    <p class="tiptext">如果链接多个样式表，它们将按顺序应用，因此最后一个样式表中的样式将覆盖前面的样式表中的样式。</p>
  </div>

  <h3 class="sigil_not_in_toc">应该使用什么样式？</h3>

  <p>The styles you use for your text are entirely up to you.</p>
  <p>您用于文本的样式完全取决于您。</p>

  <p>The best way to learn how to use styles is to find an EPUB that contains formatting you like and look at what its CSS files contain and how it uses those styles in the book.</p>
  <p>学习如何使用样式的最好方法是找到一个包含所需格式的 EPUB，并查看其 CSS 文件包含的内容以及在书中如何使用这些样式。</p>

  <div class="tip">
    <p class="tiptext">If you have any errors in your style definitions they will silently be ignored. You can use the menu item Tools→Validate Stylesheets With W3C to check for errors.</p>
    <p class="tiptext">如果样式定义中有任何错误，它们将被静默忽略。您可以使用菜单项“工具”→“使用 W3C 验证样式表”来检查错误。</p>
  </div>
</body>
</html>